<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>LoginByName</title>
    <link rel="StyleSheet" href="../css/login.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../css/pet-store-plus.css">

    <script src="/js/58cb2985af.js"></script>
<!--    <script src="https://kit.fontawesome.com/58cb2985af.js" crossorigin="anonymous"></script>-->
</head>
<body>
<!--头部-->
<div id="topbar">
    <div id="LogoContent">
        <a> <img src="../images/logo-topbar.gif" /></a>
    </div>
    <div>
    </div>
</div>
<div class="sidebar" id="sidebar">
</div>

<div class="content" id="content">
    <div style="grid-column: span 1;grid-row: span 8"></div>
    <div id="w">
        <div class="registerContent">

            <form action="/admin/register" class="registerForm" method="post">
                <table class="registerList">
                    <tr>
                        <td class="listName">username： </td>
                        <td class="listContent">
                            <input type="text" class="registerFormInput" name="username" id="username">
                        </td>
                    </tr>

                    <tr>
                        <td class="listName">password：</td>
                        <td class="listContent">
                            <input type="password" class="registerFormInput" name="password" id="password">
                        </td>
                    </tr>

                    <tr>
                        <td class="listName">phone number：</td>
                        <td class="listContent">
                            <input type="text" class="registerFormInput" name="phoneNumber" id="phoneNumber">
                        </td>
                    </tr>

                    <tr>

                        <td class="listName">Verification code：</td>
                        <td class="listContent" style="display: inline-block;">
                            <input type="text" class="registerFormInputCode" name="phoneCode" id="phoneCode">
                            <button type="button" class="registerObtain" onclick="obtainRegisterCode()">obtain</button>
                        </td>

                    </tr>

                    <tr>
                        <td class="listName">Invitation code：</td>
                        <td class="listContent">
                            <input type="text" class="registerFormInput" name="inviteCode" id="inviteCode">
                        </td>
                    </tr>
                </table>

                <div class="registerFormItem">
                    <div class="loginFormLink">
                        <p th:if="${errorMsg}" th:text="${errorMsg}" style="color: red;"></p>
                    </div>
                    <input type="submit" class="registerFormSubmit" value="register">
                </div>
                <div class="loginFormLink">
                    <a href="/admin/login" class="link2">have Account? go login</a>
                </div>

            </form>
        </div>
    </div>

</div>
<script>
    function obtainRegisterCode(){

        var pn=document.getElementById("phoneNumber").value;
        alert('已发送验证码至' + pn); // 只有确定选项，没有取消选项
        console.log(pn);
        var url="/admin/sendPhoneCodeForAdminRegister?phoneNumber="+pn;
        fetch(url, {
            method: 'GET',
        })
            .then(response => {
                if (response.ok) {
                    console.log()

                } else {
                    console.log("请求失败：" + response.status);
                }
                return response.json()
            }).then(data=>{
                console.log(data);
            // console.log(data.errorMsg);
            //     const  Msg=document.getElementsById('Msg');
            //     Msg.style.display='inline-block';
            // document.getElementById("ErrorMsg").innerText = data.errorMsg; // 设置 ErrorMsg 的值为 "用户名已存在"

        })
            .catch(error => {
                console.error('发生错误:', error);
            });
    }
</script>
</body>
</html>